<template>
  <div class="chat-content">
    <!-- recordContent 聊天记录数组-->
    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto" :style="{marginTop:`${myLeft}px`}">
      <div v-for="(itemc,indexc) in recordContent" :key="indexc">
        <!-- 对方 -->
        <div class="word" v-if="!itemc.mineMsg">
          <img :src="itemc.headUrl">
          <div class="info">
            <p class="time">{{ itemc.nickName }} {{ chatTime(itemc.timestamp) }}</p>
            <div class="info-content">
              <pre>{{ itemc.contactText }}</pre>
            </div>
          </div>
        </div>
        <!-- 我的 -->
        <div class="word-my" v-else>
          <div class="info">
            <p class="time">{{ itemc.nickName }} {{ chatTime(itemc.timestamp) }}</p>
            <div class="info-content">{{ itemc.contactText }}</div>
          </div>
          <img :src="itemc.headUrl">
        </div>
      </div>
    </ul>

    <el-input
      class="my-input"
      placeholder="请输入内容"
      v-model="word"
      @keyup.enter.native="addUserWord2"
      clearable>
    </el-input>
    <div class="ask-btn" v-if="showQuestionFlag">
      <el-button v-for="item in questionList[questionFocusIndex]" :key="item" :size="'mini'" class="ask-btn-item"
                 @click="answer(item)">{{ item }}
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showQuestionFlag: false,
      myLeft: 0,
      questionList: [
        ["优化生产工艺", "使用清洁能源", "提高废弃物利用率", "推行碳交易和碳计划", '加强员工培训'],
        ["使用高效、低能耗的生产技术", "优化供应链管理", "推广循环经济理念", "推广新型的燃料替代肥料", "实施废气和废水资源化利用"]
      ],
      questionFocusIndex: 0,
      interval: null, // 计时器
      timeStep: 5, // 运动时间间隔
      word: "",
      testCount: 0,
      recordContent: [],
      // 备选回答答
      answerList: [
        `您好，作为一名碳管理专家，我非常理解您的需求。以下是我给出的建议，供您参考：
1.优化生产工艺： 钢铁生产过程中排放二氧化碳的主要环节是炼铁、炼钢和轧制。
因此，我们建议优化这些环节的生产工艺，以减少排放量。可以使用高温等技术手段，提高生产效率，减少原材料的消耗以及废弃物的产生。
2.使用清洁能源： 燃煤是钢铁生产中的重要排放源之一，但也是最容易控制的。
我们建议使用清洁能源代替燃煤，如石油、天然气和可再生能源等。这将大幅度减少二氧化碳的排放，同时也能提高企业形象。
3.提高废弃物利用率： 钢铁生产过程中产生的废气、废水和固废都需要进行处理和排放。
我们建议提高废弃物的利用率，如对废气进行回收再利用，将钢铁废水回收再利用或进行循环利用，对钢渣进行二次利用等，从而减少废弃物的排放量。
4.推行碳交易和碳计划： 通过建立碳交易市场，可以鼓励企业减少排放量，提高能源利用效率，从而降低碳排放成本。
同时，推行碳计划可以帮助企业合理规划可持续发展的目标和行动，提高企业的环保意识和责任感。
5.加强员工培训： 钢铁企业中，员工是企业的重要资源。建议加强员工培训，提高员工的环保意识和技能水平，使其能够更好地履行环保职责，
参与减排工作，从而实现碳减排目标。
以上是我给出的建议，希望对您有所帮助。同时，建议在实施上述方案之后，定期评估减排效果，并进行长期规划和调整，以确保企业的可持续发展和环境保护。`,
        `当钢铁生产过程中的炼铁、炼钢和轧制等环节的工艺优化后，可以有效地减少企业的二氧化碳排放量。以下是一些可能的措施：
1.使用高效、低能耗的生产技术：新型的钢铁生产技术，如转炉炼钢、电弧炉炼钢、氧气底吹转炉等，具有高效率、低消耗的特点。这些技术可以提高生产效率，
减少原材料的消耗，从而减少碳排放量。
2.优化供应链管理：优化供应链管理是减少碳排放量的重要途径。通过建立合理的采购计划和库存管理，可以减少不必要的物流环节和供应链浪费，降低碳排放量。
3.推广循环经济理念：推广循环经济理念，即将生产过程中产生的废料和污染物重新利用，是减少碳排放的有效途径。
如采用废钢水自循环工艺、钢渣综合利用等工艺，可以使得钢铁生产过程中产生的废弃物得到充分利用，减少排放。
4.推广新型的燃料替代肥料：推广新型的燃料和肥料是减少二氧化碳排放的重要途径。替代燃料可以减少燃煤和发电过程中的二氧化碳排放，
而替代肥料可以有效减轻土壤、空气和水体的污染负荷。
5.实施废气和废水资源化利用：钢铁企业生产过程中会产生大量的废气和废水，如果对其资源化利用，可以有效地降低企业的能耗和碳排放。
如将一些废气和废水回收再利用，并作为原材料的一部分进行加工，可以有效节约资源和降低碳排放量。
总之，优化生产工艺是实现钢铁企业碳减排的重要措施之一。通过以上措施的实施，钢铁企业可以在不影响生产效益的前提下，实现更加环保的生产。`
      ]
    }
  },
  methods: {
    chatTime() {
      return ''
    },
    load() {
    },
    // 添加用户输入到聊天框中
    addUserWord(word) {
      if (word) {
        this.recordContent.push({
          mineMsg: true,
          headUrl: require("@/assets/yong.png"),
          nickName: "用户",
          contactText: word
        })
        return
      }


    },
    addUserWord2() {
      this.recordContent.push({
        mineMsg: true,
        headUrl: require("@/assets/yong.png"),
        nickName: "用户",
        contactText: this.word
      })
      this.dealWord(this.answerList[2], false, 0.3)
      this.word = ""
    },
    // 逐个输出文字内容到聊天框中
    dealWord(word, stop, speed) {
      var _this = this
      var newWordIndex = 0;
      this.showQuestionFlag = false
      _this.recordContent.push({
        mineMsg: false,
        headUrl: require("@/assets/kefu.png"),
        nickName: "智能减排顾问",
        contactText: ""
      })
      this.interval = setInterval(function () {
        if (newWordIndex > word.length) {
          console.log("quit")
          clearInterval(_this.interval)
          _this.showQuestionFlag = true
        }
        if (!stop) {
          _this.myLeft -= speed || 0.2
        }
        _this.recordContent[_this.recordContent.length - 1].contactText += word.charAt(newWordIndex)
        newWordIndex += 1
      }, _this.timeStep)
    },

    answer(word) {
      if (word == "优化生产工艺") {
        this.addUserWord("详细说说" + word)
        this.dealWord(this.answerList[1], false, 0.4)
        this.$set(this.questionList, [["使用高效、低能耗的生产技术", "优化供应链管理", "推广循环经济理念", "推广新型的燃料替代肥料", "实施废气和废水资源化利用"]])
        this.questionFocusIndex = 1
      } else {
        this.addUserWord(word)
      }

      // if(word == "详细说说优化供应链管理的举措"){
      //   this.dealWord(this.answerList[1], false, 0.4)
      //   this.$set(this.questionList, [["原材料获取阶段矿用钢的减排方案"]])
      //   this.questionFocusIndex = 2
      // }else if(word == "给出一些关于范围三减排方案"){
      //   this.dealWord(this.answerList[2], false, 0.3)
      //   this.questionFocusIndex = 2
      // }

    }
  },
  mounted() {
    if (this.$route.query.type) {
      this.dealWord(this.answerList[0], true)
    } else {
      this.dealWord(this.answerList[0], true)
    }

  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
}
</script>

<style lang="scss">
.ask-btn {
  position: fixed;
  bottom: 20px;
  left: 450px;
  width: 800px;
}

.ask-btn-item {
  margin-top: 5px;
}

.my-input {
  position: fixed;
  left: 30%;
  bottom: 10%;
  width: 800px;
}

.chat-content {
  width: 100%;
  padding: 20px;

  .word {
    display: flex;
    margin-bottom: 20px;
    max-width: 600px;

    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .info {
      margin-left: 10px;

      .time {
        font-size: 12px;
        color: #000;
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin-top: -5px;
      }

      .info-content {
        padding: 10px;
        font-size: 14px;
        background: #94dba0;
        position: relative;
        margin-top: 8px;
      }

      //小三角形
      .info-content::before {
        position: absolute;
        left: -8px;
        top: 8px;
        content: '';
        border-right: 10px solid #94dba0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
    }
  }

  .word-my {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;

    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .info {
      width: 90%;
      margin-left: 10px;
      text-align: right;

      .time {
        font-size: 12px;
        color: rgba(51, 51, 51, 0.8);
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin-top: -5px;
        margin-right: 10px;
      }

      .info-content {
        max-width: 70%;
        padding: 10px;
        font-size: 14px;
        float: right;
        margin-right: 10px;
        position: relative;
        margin-top: 8px;
        background: #A3C3F6;
        text-align: left;
      }

      //小三角形
      .info-content::after {
        position: absolute;
        right: -8px;
        top: 8px;
        content: '';
        border-left: 10px solid #A3C3F6;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
    }
  }
}
</style>
